import React, { useState, useEffect } from "react";
import { Space, Table, Button, Modal, Input, Select, Radio, Pagination } from "antd";
import { getOrder, updateOrder, searchOrder } from "../../services/order";
const { Column } = Table;
const { Search } = Input;
const { Option } = Select;

export default function () {

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [orderArr, setOrderArr] = useState([]);
  const [value1, setValue1] = useState();
  const [value2, setValue2] = useState();
  const [value3, setValue3] = useState();
  const [value4, setValue4] = useState();
  const [value5, setValue5] = useState();
  const [radioValue, setRadioValue] = useState(1);
  const [res, setRes] = useState({});
  const [type, setType] = useState("");
  const [value, setValue] = useState("");
  const [sel, setSel] = useState("userId");

  const showModal = (data) => {
    // console.log(data._id);
    setIsModalOpen(true);
    setValue1(data.times);
    setValue2(data.userId);
    setValue3(data.phone);
    setValue4(data.address);
    setValue5(data.orderId);
    if (data.status == "已完成") {
      setRadioValue(1);
    } else {
      setRadioValue(0);
    }
    setRes(data);
  };

  const [pagination, setPagination] = useState({
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: [5, 10, 15, 20, 25],
    showTotal: total => `共 ${total} 条`
  })

  const show = async (params = {}) => {
    if (params.type) {
      setType(params.type);
      setValue(params.value);
    } else {
      params.type = type;
      params.value = value;
    }
    let result = await getOrder(params)
    // console.log(result)
    setOrderArr(result.rows)
  }

  //获取分页数据信息
  const getPagination = async (curPage, pageSize) => {
    let result = await getOrder({ curPage, pageSize })
    result.current = parseInt(result.curPage)
    setPagination({ ...pagination, ...result })
  }

  useEffect(() => {
    show()
    getPagination(1, 5)
  }, [0])

  const handleOk = async () => {
    console.log(res);
    if (radioValue == 1) {
      res.status = "已完成";
    } else {
      res.status = "未完成";
    }
    await updateOrder(res);
    show();
    setIsModalOpen(false);

  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  //分页
  const handleChange = (pagination) => {
    console.log(pagination)
    show({
      current: pagination.current,
      pageSize: pagination.pageSize
    });
  }
  //搜索
  const onSearch = async (value) => {
    let type = sel
    //  console.log(type);
    console.log(value);
    let result = await searchOrder({ type, value });
    // console.log(result.rows);
    let a = []
   
    if (type == "orderId") {
      result.rows.forEach(element => {
        if (element.orderId == value)
          a.push(element)
      });
      setOrderArr(a);
    } else {

      setOrderArr(result.rows);
    }

  };

  const handleSelectChange = (value) => {
    console.log(`selected ${value}`);
    setSel(value);
  };

  const onRadioChange = (e) => {
    console.log('radio checked', e.target.value);
    setRadioValue(e.target.value);
  };

  return (
    <div>
      <h1>订单管理</h1>
      <Select
        defaultValue="用户"
        style={{
          width: 120,
        }}
        onChange={handleSelectChange}
      >
        <Option value="userId">用户</Option>
        <Option value="orderId">订单编号</Option>
      </Select>
      <Search placeholder="查询订单" onSearch={onSearch} enterButton style={{ width: 400 }} />
      <Table dataSource={orderArr} pagination={pagination} getPagination={getPagination} onChange={handleChange} rowKey="_id">
        <Column title="订单创建时间" dataIndex="times" />
        <Column title="用户" dataIndex="userId" />
        <Column title="电话" dataIndex="phone" />
        <Column title="地址" dataIndex="address" />
        <Column title="订单编号" dataIndex="orderId" />
        <Column title="订单状态" dataIndex="status" />

        <Column
          title="操作"
          key="action"
          render={(_, record) => (
            <Space size="middle">
              <Button type="primary" onClick={() => { showModal(record) }}>
                修改订单
              </Button>
              <Modal title="修改订单" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <div>
                  <label>订单创建时间:</label>
                  <Input value={value1} />
                </div>
                <div>
                  <label>用户:</label>
                  <Input value={value2} />
                </div>
                <div>
                  <label>电话:</label>
                  <Input value={value3} />
                </div>
                <div>
                  <label>地址:</label>
                  <Input value={value4} />
                </div>
                <div>
                  <label>订单编号:</label>
                  <Input value={value5} />
                </div>
                <div>
                  <label>订单状态:</label>
                  <Radio.Group onChange={onRadioChange} value={radioValue}>
                    <Radio value={0}>未完成</Radio>
                    <Radio value={1}>已完成</Radio>
                  </Radio.Group>
                </div>
              </Modal>
            </Space>
          )}
        />
      </Table>
    </div>
  );
}